<template>
    <div class="cooperative-enterprise-age">
        <echarts :data="optionData" height="300px"></echarts>
    </div>
</template>

<script>
import Echarts from "@components/my-components/echarts.vue";

export default {
    mixins: [],
    components: {
        Echarts,
    },
    props: {
        options: {
            type: Array,
            default: (() => [])
        },
    },
    data() {
        return {};
    },
    computed: {
        optionData() {
            const colors = ["#3b68ff","#2ec75a","#ff8f00","#ff5454","#ff5888"];
            return {
                legend: {},
                tooltip: {
                    trigger: "axis",
                    formatter: function (params) {
                        let str = params[0].data[0] + "<br />";
                        params.forEach((item,ind) => {
                            str +=
                                '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' +
                                item.color +
                                '"></span>' +
                                item.seriesName +
                                " : " +
                                item.data[ind+1] +
                                " 个 " +
                                "<br />";
                        });
                        return str;
                    },
                },
                dataset: {
                    source: this.options
                },
                xAxis: [
                    { 
                        type: "category", 
                        gridIndex: 0,
                        axisPointer: {
                            type: "shadow",
                        },
                        axisLabel: {
                            interval:0,
                            rotate: this.options[0].length > 11 ? 40 : 0
                        },
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "企业数量（个）",
                        position: "left",
                        alignTicks: true,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: colors[0],
                            },
                        },
                        axisLabel: {
                            formatter: "{value}",
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dotted',
                            }
                        },
                        axisTick:{
                            show:false // 不显示坐标轴刻度线
                        },
                    },
                ],
                grid: [{ bottom: "20%" }],
                series: [
                    // These series are in the first grid.
                    { 
                        type: "bar", 
                        seriesLayoutBy: "row",
                        // barMinHeight:4,
                        color:colors[0]    
                    },
                    { 
                        type: "bar", 
                        seriesLayoutBy: "row",
                        // barMinHeight:4,
                        color:colors[1]    
                    },
                    { 
                        type: "bar", 
                        seriesLayoutBy: "row",
                        // barMinHeight:4,
                        color:colors[2]    
                    },
                    { 
                        type: "bar", 
                        seriesLayoutBy: "row",
                        // barMinHeight:4,
                        color:colors[3]    
                    },
                    { 
                        type: "bar", 
                        seriesLayoutBy: "row",
                        // barMinHeight:4,
                        color:colors[4]    
                    },
                    // These series are in the second grid.
                ],
                dataZoom : [
                    // {
                    //     type: 'slider',
                    //     show: true,
                    //     start: 0,
                    //     end: 50,
                    //     handleSize: 8
                    // },

                ]

            };
        },
    },
    watch: {},
    methods: {
        int() {},
    },
    mounted() {
        this.int();
    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
.cooperative-enterprise-age {
}
</style>